<template>

  <Row type="flex">
    <Col flex="450px"> <h2 class="title2">注册人员 <i>{{ regConfig.page.total }}</i></h2></Col>
    <Col flex="700px">
      <Row :gutter="[12, 8]">
        <Col :span="7">
          <Input v-model:value="regConfig.params.name" placeholder="请输入人员姓名" />
        </Col>
        <Col :span="7">
          <Select v-model:value="regConfig.params.type">
            <Option value="">请选择证书类别</Option>
            <Option :value="item.id" v-for="item in dictionary.type">{{ item.dataValue }}</Option>
          </Select>
        </Col>
        <Col :span="7">

          <Select v-model:value="regConfig.params.major">
            <Option value="">请选择证书专业</Option>
            <Option :value="item.id" v-for="item in dictionary.major">{{ item.dataValue }}</Option>
          </Select>
        </Col>
        <Col :span="3" class="text-right">
          <Button type="primary" @click="regConfig.handleSearch">查询</Button>
        </Col>
      </Row>
    </Col>
  </Row>
  <Table
      :columns="regConfig.columns"
      :row-key="record => record.id"
      :data-source="regConfig.list"
      :pagination="regConfig.page"
      :loading="regConfig.loading"
      @change="(pagination)=> changeHandler(pagination, regConfig)"
      bordered>
    <template #name="{ text, record }">
      <router-link target="_blank" :to="{ path: `/staff/${record.personId}` }" class="blue" >
        {{ text }}
      </router-link>
    </template>
    <template #indexSlot="{ index }">{{(regConfig.page.current-1)*10+index+1}}</template>
    <template #detail="{ record }"><span class="blue pointer" @click="openDetail(record)">查看</span></template>
  </Table>

  <Modal v-model:visible="visible" title="详细内容" :width="800" :footer="null" :centered="true">
    <Descriptions :column="2">
      <DescriptionsItem label="人员名称">{{ recordDetail?.personName }}</DescriptionsItem>
      <DescriptionsItem label="证书编号">{{ recordDetail?.certNo }}</DescriptionsItem>
      <DescriptionsItem label="人员证件号">{{ recordDetail?.cardNo }}</DescriptionsItem>
      <DescriptionsItem label="注册单位">{{ recordDetail?.corpName }}</DescriptionsItem>
      <DescriptionsItem label="状态">{{ recordDetail?.invalidFlag }}</DescriptionsItem>
      <DescriptionsItem label="原因">{{ recordDetail?.invalidReason }}</DescriptionsItem>
      <DescriptionsItem label="发证机关">{{ recordDetail?.organName }}</DescriptionsItem>
      <DescriptionsItem label="注册号">{{ recordDetail?.regCertNo }}</DescriptionsItem>
      <DescriptionsItem label="职称专业名称">{{ parseTime(recordDetail?.releaseDate )  }}</DescriptionsItem>
      <DescriptionsItem label="有效日期止">{{ parseTime(recordDetail?.validEdate )  }}</DescriptionsItem>
    </Descriptions>
  </Modal>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, ref, toRefs} from 'vue';
import {Row, Col, Table, Input, Select, Button, Modal, Descriptions,} from 'ant-design-vue';
import { getCompanyStaffApi , getIndexCodeApi } from '/@/api/company';
import { parseTime } from '/@/utils';
// 注册人员
const regColumns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '姓名', dataIndex: 'personName', width: 120, slots: ({ customRender: 'name' }) },
  { title: '身份证号', dataIndex: 'cardNo', width: 200 },
  { title: '证书类型', dataIndex: 'certType' },
  { title: '证书专业', dataIndex: 'majorType' },
  { title: '证书编号', dataIndex: 'regCertNo', width: 200 },
  { title: '有效期至', dataIndex: 'validEdate', width: 120, customRender: ({ record })=> parseTime(record.validEdate) },
  //{ title: '详情', dataIndex: 'id' ,slots: ({ customRender: 'src' })}
]


export default defineComponent({
  components: {
    Table , Row, Col, Input, Button, Select, Option: Select.Option ,
    Modal,Descriptions,DescriptionsItem:Descriptions.Item,
  } ,
  setup() {
    const corpId = inject('corpId') as string;
    const visible = ref<boolean>(false);
    const recordDetail = ref<any>()
    const dictionary = reactive({
      major:[],
      type:[]
    })

    const regConfig = reactive({
      key: 'reg',
      columns: regColumns,
      list: [],
      loading: false,
      params:{
        name:'',
        major:'',
        type:''
      },
      page: {
        total: 0,
        current: 1
      },
      handleSearch:function (){
        regConfig.loading = true;
        let { name , major , type } = regConfig.params;
        getCompanyStaffApi('reg', {
          corpId, current:1, name , major , type
        }).then(({ data, success }) => {
          if(success) {
            let { records, current, total } = data;
            regConfig.list = records;
            regConfig.loading = false;
            regConfig.page = {current, total};
          }else {
            regConfig.loading = false;
          }
        })
      }
    })


    const changeHandler = (pagination, config) => {
      const { current } = pagination;
      let { loading, list, page } = toRefs(config);
      loading.value = true;
      getCompanyStaffApi(config.key, { corpId, current }).then(({ data, success }) => {
        if(success) {
          let { records, current, total } = data;
          list.value = records;
          loading.value = false;
          page.value = {current, total};
        }
      })
    }

    const getIndexCode = (data,back) =>{
      getIndexCodeApi(data).then(res=>{
        if(back)back(res)
      })
    }

    const openDetail = data =>{
      recordDetail.value = data
      visible.value = true;
    }

    const init = () => {

      changeHandler({current: 1}, regConfig);
      getIndexCode('RY_REG_PROF',function (res){    //初始化证书类别字典表
        dictionary.major = res;
      })
      getIndexCode('RY_REG_TYPE',function (res){   //初始化证书专业字典表
        dictionary.type = res;
      })
    }

    onMounted(init)

    return {
      regConfig,  changeHandler , dictionary ,openDetail , recordDetail ,visible , parseTime
    }
  },
})
</script>

<style lang="less" scoped>


.ant-col{
  padding-top: 16px;
  margin-bottom: 8px;
}

.ant-select ,.ant-btn{
  width: 100%;
}

</style>
